<template>
  <div id="login">
    <div class="loginbox">
      <el-form ref="loginFormRef" :model="loginForm" :rules='loginFormRules'>
        <img src="./logo_index.png" alt="">
         <!-- prop属性值设置当前项目与校验规则关联 -->
        <el-form-item prop='mobile'>
        <el-input v-model="loginForm.mobile" placeholder='请输入手机号码'>
          <i slot="prefix" class="iconfont icon-shouji"></i>
        </el-input>
        </el-form-item>
          <el-form-item prop='code'>
            <el-input v-model="loginForm.code" placeholder='校验码'>
              <i slot="prefix" class="iconfont icon-weibiaoti-"></i>
            </el-input>
        </el-form-item>
        <el-form-item prop='xieyi'  style="text-align:left">
            <el-checkbox v-model="loginForm.xieyi" style="margin-right:10px"> </el-checkbox>
            <span>我已阅读并同意用户协议和隐私条款</span>
        </el-form-item>
         <el-form-item prop='code'>
            <el-button :loading='isActive' :disabled='isActive' type='primary' style="width:100%" @click="login()">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// 引入gt.js文件
import '@/assets/js/gt.js'

// 引入iconfont图标的css样式文件
import '@/assets/iconfont/iconfont.css'

export default {
  created () {
    let that = this
    document.onkeypress = function (e) {
      // document.all可以判断浏览器是否是IE
      // event.keyCode和e.which都是指指示哪个键被按下，给出该键的索引值
      var keycode = document.all ? event.keyCode : e.which
      if (keycode === 13) {
        that.login()
        return false
      }
    }
  },
  data () {
    var xieyiTest = function (rule, value, callback) {
      if (value) {
        callback()
      } else {
        callback(new Error('无条件遵守规则'))
      }
    }
    return {
      // 用于存储极验对象
      ctaObj: null,
      isActive: false,
      loginForm: {
        mobile: '13911111111',
        code: '246810',
        xieyi: true
      },
      loginFormRules: {
        // prop属性值设置当前项目与校验规则关联
        mobile: [
          { required: true, message: '请输入手机号码' },
          { pattern: /^1[35789]\d{9}$/, message: '手机号码格式不对' }
        ],
        code: [
          { required: true, message: '校验码必填' }
        ],
        // 通过validator使用自定义校验函数
        xieyi: [
          { validator: xieyiTest }
        ]
      }
    }
  },
  methods: {
    login () {
      // 对整个表单进行校验，validata是一种方法
      this.$refs.loginFormRef.validate((valid) => {
        // 表单校验成功，长度等
        if (valid) {
          // 判断点击登录按钮，如果极验对象存在就直接显示窗口
          if (this.ctaObj !== null) {
            // 并不再执行后续操作
            return this.ctaObj.verify()
          }
          this.isActive = true
          // 极验
          // 如果表单校验成功，通过axios发送get请求获取数据
          var pro = this.$http.get(`captchas/${this.loginForm.mobile}`)
          pro
            .then(result => {
              // console.log(result)
              // 对返回的极限请求秘钥信息做接收处理
              // 通过对象解构赋值，设置data接收，与下文data衔接
              let { data } = result.data
              // 生成极验窗口
              window.initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                offline: !data.success,
                new_captcha: true,
                product: 'bind'
              }, captchaObj => {
                // 这里可以调用验证实例 captchaObj 的实例方法
                captchaObj.onReady(() => {
                  // 验证码ready之后才能调用verify方法显示验证码
                  captchaObj.verify() // 显示验证码窗口

                  // 把第一次生成的极验对象存储起来

                  this.ctaObj = captchaObj
                  this.isActive = false
                }).onSuccess(() => {
                  // your code
                  // 极验成功时执行存储及跳转

                  this.loginAct()
                }).onError(() => {
                  // your code
                })
              })
            })
            .catch(err => {
              return this.$message.error('获得请求秘钥信息错误' + err)
            })
            // 通过axios发送post请求，判断与数据库中数据
            // this.loginAct();
        }
      })
    },
    loginAct () {
      let pro = this.$http.post('/authorizations', {
        mobile: this.loginForm.mobile,
        code: this.loginForm.code
      })
      pro
        .then(result => {
          console.log(result) // data config headers request status
          if (result.data.message === 'OK') {
            window.sessionStorage.setItem('userinfo', JSON.stringify(result.data.data))
            // 路由对象：组件中是this.$router
            this.$router.push('/home')
          }
        })
        .catch(err => {
          return this.$message.error('用户名或密码错误' + err)
        })
    }
  }
}
</script>

<style lang='less' scoped>
#login{
  background-color: gray;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('./login_bg.jpg');
  background-size: cover;
  .loginbox{
    width: 400px;
    height: 340px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    img{
      width: 60%;
      margin: 14px auto;
    }
    .el-form{
      width: 70%;

    }
  }
}

</style>
